<template>
  <div style="width:100%">
    <h1 style="font-size:40px;">{{ article.title }}</h1><br/>
    <el-divider content-position="left">
      <span style="color:#888888;">
        作者 : {{ article.author }} <el-divider direction="vertical"></el-divider>
        最近编辑者 : {{ article.editor }} <el-divider direction="vertical"></el-divider>
        发布时间 : {{ article.pubdate }} <el-divider direction="vertical"></el-divider>
        最近更新时间 : {{ article.update }} <el-divider direction="vertical"></el-divider>
        <router-link :to="'/edit/'+article.id" class="link"> 编辑</router-link>
      </span>
    </el-divider><br/><br/>
    <mavon-editor class="markdown-area" v-model="article.content" :toolbarsFlag="false" defaultOpen='preview' :subfield="false" style="width:100%;"/>
    <br/><el-divider>点<a href='javascript:void(0)' v-on:click="refreshComment">此处</a>加载评论</el-divider><br/>
    <div id="vcomments"></div>
  </div>
</template>

<script>
// @ is an alias to /src
import Valine from 'valine'
export default {
  name: 'Article',
  data () {
    return {
      article: {
        content: '',
        title: ''
      },
      valine: null
    }
  },
  methods: {
    refreshComment: function () {
      this.createValine()
      setTimeout(() => { window.location.hash = 'vcomments' }, 200)
    },
    createValine: function () {
      this.valine = new Valine({
        el: '#vcomments',
        appId: 'RCxFviMKbcokqgB9ozu6Vaok-gzGzoHsz',
        appKey: 'sIO5vSWBdY37dUzvspwULyj7',
        placeholder: '写下你的评论...',
        avatar: 'robohash',
        recordIP: true,
        path: this.$route.path
      })
    }
  },
  created () {
    this.axios.get('https://lycm.xyz/api/articles/' + this.$route.params.id + '/')
      .then((res) => {
        this.article = res.data
        document.title = this.article.title + ' - 文章 - RookieWiki'
      })
      .catch((err) => {
        this.$notify.error({
          title: '在向服务器请求数据时出现错误',
          message: err
        })
      })
    this.createValine()
  },
  watch: {
    $route (to, from) {
      if (from.path !== to.path) {
        this.valine && this.valine.setPath(to.path)
      }
    }
  }
}
</script>
<style scoped>
</style>
